<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Light Bulb On/Off With Sound</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="light">
		<div class="box" style="--i:0;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="box" style="--i:1;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="box" style="--i:2;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="box" style="--i:3;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="box" style="--i:4;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="box" style="--i:5;">
			<div class="bulb">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="switch">
			<div class="btn"></div>
		</div>
	</div>
	<audio id="audio" src="click.mp3" autostart="false"></audio>
	<script>
		let btn = document.querySelector('.btn');
		let body = document.querySelector('body');
		var sound = document.getElementById("audio");
		btn.onclick = function(){
			body.classList.toggle('on');
			sound.play();
		}
	</script>
	</body>
</html>
